<template>
  <el-dialog
    :visible.sync="averageVisible"
    :before-close="handleClose"
    :append-to-body="false"
    :class="{'mobile-el-dialog':showMobilePage}"
    class="mengli-average-dialog large-common-dialog-size"
  >
    <div slot="title" style="padding: 24px 0 0 24px;">
      <Title :title="name + 'IP数据'" style="flex:none;margin-right: 20px;" font-size="20px" />
    </div>
    <el-row :class="{'is-mobile': showMobilePage}" class="average-list">
      <el-col :span="showMobilePage?24:6" class="average-item">
        <div class="title">
          <img src="../../assets/mengli/downloadNum.png" class="img" alt >平均下载量
        </div>
        <div class="count-item-right">
          <ToolTip :content="averageDataObj.averageDownloadNum | moneyFilter">
            <span class="content">{{ averageDataObj.averageDownloadNum | bigDataFilter }}</span>
          </ToolTip>
        </div>
      </el-col>
      <el-col :span="showMobilePage?24:6" class="average-item">
        <div class="title">
          <img src="../../assets/mengli/likeNum.png" alt >平均赞赏次数
        </div>
        <ToolTip :content="averageDataObj.averageRewardNum | moneyFilter">
          <div class="content">{{ averageDataObj.averageRewardNum | bigDataFilter }}</div>
        </ToolTip>
      </el-col>
      <el-col :span="showMobilePage?24:6" class="average-item">
        <div class="title">
          <img src="../../assets/mengli/sengNum.png" alt >平均发送量
        </div>
        <ToolTip :content="averageDataObj.averageSendNum | moneyFilter">
          <div class="content">{{ averageDataObj.averageSendNum | bigDataFilter }}</div>
        </ToolTip>
      </el-col>
      <el-col :span="showMobilePage?24:6" class="average-item">
        <div class="title">
          <img src="../../assets/mengli/likePrice.png" alt >平均赞赏金额
        </div>
        <ToolTip :content="averageDataObj.averageRewardPrice | moneyFilter">
          <div class="content">¥{{ averageDataObj.averageRewardPrice | bigDataFilter }}</div>
        </ToolTip>
      </el-col>
    </el-row>
    <div
      v-if="averageDataObj.EducationPortrait || averageDataObj.AgePortrait || averageDataObj.AreaPortrait || averageDataObj.SexPortrait "
      id="mengli-chart-list"
      :class="{'is-mobile': showMobilePage}"
      class="mengli-chart-list">
      <div v-if="averageDataObj.EducationPortrait && averageDataObj.EducationPortrait.Education" class="age" style="border-right: 1px solid #EBEEFD">
        <Title title="学历分布" font-size="16px"/>
        <ageAnalysis ref="eduPortraitContainer" :origin-data="averageDataObj.EducationPortrait.Education" />
      </div>
      <div v-if="averageDataObj.AgePortrait && averageDataObj.AgePortrait.Age" class="age">
        <Title title="用户年龄分布" font-size="16px"/>
        <ageAnalysis ref="ageAnalysisContainer" :origin-data="averageDataObj.AgePortrait.Age" :x-axis-rotate="45" />
      </div>
      <div v-if="averageDataObj.AreaPortrait && averageDataObj.AreaPortrait.Area" class="area">
        <Title style="margin-bottom: 18px;" title="地区分布" font-size="16px"/>
        <areaPortrait ref="areaPortraitContainer" :origin-data="averageDataObj.AreaPortrait.Area" />
      </div>
      <div v-if="averageDataObj.SexPortrait && averageDataObj.SexPortrait.Sex" class="sex">
        <Title title="用户性别分析" font-size="16px"/>
        <sexAnalysis ref="sexAnalysisContainer" :origin-data="averageDataObj.SexPortrait.Sex" />
      </div>
    </div>
  </el-dialog>
</template>
<script>
import Title from '@/components/Title';
import sexAnalysis from '@/components/Mengli/sexAnalysis';
import ageAnalysis from '@/components/Mengli/ageAnalysis';
import areaPortrait from '@/components/Mengli/AreaPortrait';
import { mapState } from 'vuex';
import { moneyFilter, bigDataFilter } from '@/filters/number';
export default {
  components: { Title, sexAnalysis, ageAnalysis, areaPortrait },
  filters: { moneyFilter, bigDataFilter },
  props: {
    averageVisible: {
      type: Boolean,
      default: false
    },
    averageDataObj: {
      type: Object,
      default: () => {
        return {};
      }
    },
    name: {
      type: String,
      default: ''
    }
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    handleClose() {
      this.$emit('closeDialog');
    }
  }
};
</script>
<style lang="scss">
.mengli-average-dialog {
  .el-dialog {
    max-height: 90%;
  }
  .el-dialog__header {
    padding-bottom: 10px;
  }
  .el-dialog__body {
    overflow-y: auto;
    padding: 0 24px 32px 24px !important;
  }
  .average-list {
    margin: 30px 0 20px;
    .average-item {
      display: flex;
      .title {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 1.2;
        display: flex;
        align-items: center;
        flex-shrink: 0;
        margin-right: 10px;
        img {
          width: 16px;
          height: 16px;
          margin-right: 4px;
        }
      }
      .content {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 16px;
        flex-shrink: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      &:last-child {
        margin-bottom: 0 !important;
        margin-right: 0;
      }
    }
    &.is-mobile {
      margin: 12px 0 12px 0;
      .average-item  {
        margin-bottom: 6px;
      }
    }
  }
  .mengli-chart-list {
    display: flex;
    border: 1px solid #ebeefd;
    border-radius: 4px;
    flex-wrap: wrap;
    width: 99%;
    .sex {
      width: 50%;
      padding: 32px 32px 0 32px;
      overflow: hidden;
    }
    .age {
      width: 50%;
      padding: 32px 32px 0 32px;
      border-bottom: 1px solid #ebeefd;
      overflow: hidden;
    }
    .area {
      width: 50%;
      padding: 32px 30px 32px 32px;
      border-right: 1px solid #ebeefd;
      overflow: hidden;
    }
    &.is-mobile {
      border: none !important;
      .sex,.area,.age {
        width: 100%;
        padding: 0;
        border: none !important;
      }
    }
  }
}
</style>
